<template>
  <!-- 储充大屏 -->
  <div class="storageChargingScreen">
    <Header
      :companyProvStatsList="companyProvStatsList"
      :title="'雷泽充能脉络'"
      :leftCon="{
        title: '雷泽矩阵',
        path: '/DataScreen',
      }"
      :rightCon="{
        title: '雷泽售能经纬',
        path: '/DataScreen/StorageAndSale',
      }"
      :defualPro="chosePro"
      :screenType="'storageCharging'"
      @changePro="(e) => changePro(e)"
    />
    <div class="contentBox">
      <div class="contentLeft">
        <div class="leftTop">
          <!-- 充电桩详细信息 -->
          <DetailsInfo :pileDetails="pileDetails" />
        </div>
        <div class="leftBottom">
          <!-- 充电电量分析 -->
          <PowerAnalysis :pileDetails="pileDetails" />
        </div>
      </div>
      <div class="contentCenter">
        <!-- 中间上方充电各类数量 -->
        <div class="centerTop">
          <CountItem :toltalCount="toltalCount" />
        </div>
        <!-- 中间下方地图 -->
        <div class="centerBottom">
          <Maps
            :provinceId="chosePro"
            :mapsData="mapsData"
            :provinceData="provinceData"
            @provinceClick="provinceClick"
          />
        </div>
      </div>
      <div class="contentRight">
        <div class="rightTop">
          <!-- 枪实时情况 -->
          <GunRealTime :gunRealTimeNum="gunRealTimeNum"/>
        </div>
        <div class="rightBottom">
          <!-- 枪详细数据 -->
          <GunDetails :gunRealTimeNum="gunRealTimeNum"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import Header from "../conpoments/header.vue"; 
import DetailsInfo from "./components/DetailsInfo.vue"; 
import PowerAnalysis from "./components/PowerAnalysis.vue"; 
import CountItem from "./components/CountItem.vue"; 
import GunRealTime from "./components/GunRealTime.vue"; 
import GunDetails from "./components/GunDetails.vue"; 
import Maps from "./components/Maps.vue";
const $api = inject("$api");
const chosePro = ref("广东省"); // 默认广东省
const provinceData = ref([]);
const mapsData = ref([]);
const companyProvStatsList = ref([]);
// 获取省份数据
const stationcityInfoStatistics = async () => {
  const res = await $api.stationcityInfoStatistics();
  // const res = {
  //   code: 0,
  //   data: {
  //     stationOrderCountRank: [
  //       {
  //         orderCount: 73,
  //         stationName: "小象",
  //         longitude: 113.01036,
  //         latitude: 23.2401,
  //         province: "广东省",
  //         city: "佛山市",
  //         pileCount: 1,
  //       },
  //       {
  //         orderCount: 31,
  //         stationName: "永发",
  //         longitude: 113.82635,
  //         latitude: 22.91301,
  //         province: "广东省",
  //         city: "佛山市",
  //         pileCount: 50,
  //       },
  //       // {
  //       //   orderCount: 31,
  //       //   stationName: "aaa",
  //       //   longitude: 113.82635,
  //       //   latitude: 22.91301,
  //       //   province: "广西省",
  //       //   city: "广州市",
  //       //   pileCount: 5,
  //       // },
  //     ],
  //     cityActiveRank: ["东莞市", "佛山市"],
  //     chargeLengthRank: [
  //       {
  //         city: "佛山市",
  //         totalChargeLength: 1.0e-4,
  //         totalElectricity: 208.367,
  //         totalOrderCount: 73,
  //       },
  //       {
  //         city: "东莞市",
  //         totalChargeLength: 1.0e-4,
  //         totalElectricity: 287.552,
  //         totalOrderCount: 31,
  //       },
  //     ],
  //   },
  //   success: true,
  // };
  if (res.code === 0) {
    // 按城市分类合并数据
    const cityMap = new Map();
    res.data.stationOrderCountRank.forEach((item) => {
      if (!cityMap.has(item.city)) {
        // 第一次遇到该城市，直接存储
        cityMap.set(item.city, {
          ...item,
          stationName: item.city, // 将站点名称改为城市名
          cityNum: 1, // 初始化城市数量为1
        });
      } else {
        // 已存在该城市，累加数据
        const existingCity = cityMap.get(item.city);
        existingCity.orderCount += item.orderCount;
        existingCity.pileCount += item.pileCount;
        existingCity.cityNum += 1; // 城市数量加1
        // 经纬度保持第一条记录的值
      }
    });

    // 转换回数组
    mapsData.value = Array.from(cityMap.values());

    // 按省份分类合并数据（用于全国地图显示）
    const provinceMap = new Map();

    res.data.stationOrderCountRank.forEach((item) => {
      if (!provinceMap.has(item.province)) {
        // 第一次遇到该省份，直接存储
        provinceMap.set(item.province, {
          ...item,
          stationName: item.province, // 将站点名称改为省份名
          city: item.province, // 城市名也设为省份名，便于地图组件处理
          provinceNum: 1, // 初始化省份数量为1
          cityCount: 1, // 初始化城市数量为1
          stationCount: 1, // 初始化电站数量为1 (新增)
        });
      } else {
        // 已存在该省份，累加数据
        const existingProvince = provinceMap.get(item.province);
        existingProvince.orderCount += item.orderCount;
        existingProvince.pileCount += item.pileCount;
        existingProvince.provinceNum += 1; // 省份数量加1
        existingProvince.stationCount += 1; // 电站数量加1 (新增)
        // 如果城市不同，城市数量加1
        if (!existingProvince.cities) {
          existingProvince.cities = new Set([item.city]);
          existingProvince.cityCount = 1;
        } else if (!existingProvince.cities.has(item.city)) {
          existingProvince.cities.add(item.city);
          existingProvince.cityCount += 1;
        }
      }
    });

    // 删除辅助用的Set
    provinceMap.forEach((province) => {
      if (province.cities) {
        delete province.cities;
      }
    });

    // 将省份数据保存，供地图组件使用
    provinceData.value = Array.from(provinceMap.values());
    // 获取所有省份
    const provinces = [
      ...new Set(res.data.stationOrderCountRank.map((item) => item.province)),
    ];
    companyProvStatsList.value = provinces.map((province) => ({
      provId: province,
      provName: province,
    }));
  }
};

// 切换省份
const changePro = (value) => {
  chosePro.value = value;
};

const provinceClick = (value) => {
  // 处理由地图组件传递过来的省份名称
  chosePro.value = value.name;
};
const toltalCount = ref({});
const pileDetails = ref({});
// 获取充电统计数据
const getChargingStats = async () => {
  const res = await $api.orderStatistics();
  if (res?.code === 0) {
    toltalCount.value = res.data.total;
    pileDetails.value = res.data.month12;
  }
};
const gunRealTimeNum = ref({})
const gunRealTimeStatistics = async () => {
  const res = await $api.gunRealTimeStatistics();
  if (res?.code === 0) {
    gunRealTimeNum.value = res.data;
  }
};
// 页面初始化
const initScreen = async () => {
  await getChargingStats();
  await gunRealTimeStatistics();
};
onMounted(async () => {
  stationcityInfoStatistics();
  initScreen();
});
</script>
<style scoped lang="less">
.storageChargingScreen {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url("@/assets/screen/bg.jpg") no-repeat center / cover;
  display: flex;
  flex-direction: column;
}

.contentBox {
  flex: 1;
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 106px);
  overflow: hidden;
  margin-top: -40px;
  .contentLeft,
  .contentRight {
    width: 480px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    .leftTop,
    .leftBottom,
    .rightTop,
    .rightBottom {
      flex: 1;
      min-height: 0;
      border-radius: 4px;
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      :deep(.chartContainer) {
        flex: 1;
        min-height: 0;
        width: 100%;
      }
    }
  }

  .contentCenter {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    gap: 20px; // 添加间距

    .centerTop {
      height: 130px;
      flex-shrink: 0;
      margin-top: 10px;
    }

    .centerBottom {
      flex: 1;
      min-height: 0;
      border-radius: 4px;
    }

    :deep(.chartContainer) {
      flex: 1;
      min-height: 0;
      width: 100%;
    }
  }
}
@media (max-width: 1500px) {
  .contentBox {
    .contentLeft,
    .contentRight {
      width: 360px;
      margin-top: 0;
    }
  }
  .contentLeft,
  .contentRight {
    .leftTop,
    .leftBottom,
    .rightTop,
    .rightBottom {
      padding: 0 10px !important;
    }
  }
}
@media (max-width: 1200px) {
  .contentBox {
    .contentLeft,
    .contentRight {
      width: 300px;
    }
  }
}
</style>
